import React, { useEffect } from 'react';
import { Animated, Text, Easing } from 'react-native';
import { viewportWidth } from '@/utils/index';

function Item(props) {
  const { outside, data } = props;
  const translateX = new Animated.Value(0);

  useEffect(() => {
    Animated.timing(translateX, {
      toValue: 10,
      duration: 6000,
      easing: Easing.linear,
      useNativeDriver: true,
    }).start(({ finished }) => {
      if (finished) {
        outside(data);
      }
    });
    translateX.addListener(({ value }) => {
      if (value > 3) {
        data.isFree = true;
      }
    })
  }, [])

  const width = data.title.length * 15;
  
  return (
    <Animated.View
      style={{
        position: 'absolute',
        top: data.trackIndex * 30,
        transform: [
          {
            translateX: translateX.interpolate({
              inputRange: [0, 10],
              outputRange: [viewportWidth, -width],
            }),
          },
        ],
      }}>
      <Text>{data.title}</Text>
    </Animated.View>
  );
}

export default Item;
